#back {

    width: 100%;
}

#home {
    width: 100%;

    .home-swiper {
        width: 100%;


        img {
            width: 100%;
            height: 100%;
        }

        .swiper-pagination-bullet {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #fff;
            border-radius: unset;
        }

        .swiper-button-prev::after {
            font-size: 2rem;
        }

        .swiper-button-next::after {
            font-size: 2rem;
        }
    }
}

#item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .hot {
        display: flex;
        width: 80%;
        align-items: center;

        justify-content: space-between;

        .tuwen {
            width: 60%;
            flex-shrink: 0;

            .wen {
                text-align: right;

                .h9 {
                    font-size: 3.5rem;
                    color: #2a2a2a;
                }

                .p {
                    font-size: 1.2rem;
                    color: #9b9b9b;
                }
            }

            .datu {
                position: relative;
                // padding-top: 4rem;
                flex-shrink: 0;
                width: 30%;

                .shangbiao {
                    position: absolute;
                }

                .lieren {
                    width: 100%;
                    height: 100%;

                }
            }

            &>.picture {
                width: 100%;
                height: 30%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
                margin-top: 1vw;


                img {
                    width: 48%;
                    height: 48%;
                    margin-bottom: 1rem;
                }
            }
        }

        .shangbiao {
            writing-mode: vertical-lr;
            width: 4rem;
            height: 6rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: relative;

            .zi {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: red;
                font-size: 2rem;
                color: #fff;
            }

            .sanjiao {
                width: 0;
                height: 0;
                // border: solid 2rem red;
                border-bottom: solid 1rem #fff;
                border-left: solid 2rem transparent;
                border-right: solid 2rem transparent;
                position: absolute;
                bottom: 0;

            }

        }
    }

    .zhugong {
        display: flex;
        width: 80%;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;

        .tuwen {
            width: 60%;
            flex-shrink: 0;

            .wen {
                text-align: right;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                .h9 {
                    font-size: 3.6rem;
                    color: #2a2a2a;
                }

                .text {
                    display: flex;

                    .p {
                        font-size: 1.2rem;
                        color: #ababab;
                    }
                }


            }

            .zhugongbox {
                position: relative;
                // padding-top: 4rem;
                flex-shrink: 0;
                width: 30%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-top: 1rem;


                .shangbiao {
                    position: absolute;
                }

                .zhugongimg {
                    width: 100%;
                    height: 100%;

                }
            }

            &>.picture {
                width: 100%;
                height: 30%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;
                margin-top: 1vw;



                img {
                    width: 48%;
                    height: 48%;
                    margin-bottom: 1rem;
                }
            }
        }



    }

    .gengduo {
        width: 70%;

        &>h3 {
            font-size: 36px;
            padding-left: 1rem;
        }

        .tuji {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            



            .tukuai {
                width: 25%;

                margin: 1rem;
                display: flex;
                flex-direction: column;
                align-items: center;

                


                img {
                    width: 100%;
                    height: 100%;
                }

                &>p {
                    color: #000;
                    font-size: 1.4rem;
                    margin-top: 1rem;
                }

                .tu {
                    width: 100%;
                    position: relative;

                    .tu-hover {
                        position: absolute;
                        top: 0;
                        padding: 1rem;
                        background-color: #000000;
                        opacity: 0;
                        font-size: 6px;
                        color: #ffffff;
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .tukuai:hover .tu-hover {
                opacity: 0.4;
            }

        }
    }

}

#botton {
    background-color: #3b3b3b;
    width: 100%;
    height: 15vw;
    display: flex;
    justify-content: center;
    align-items: center;

    .botton-center {
        width: 80%;
        height: 10vw;

        display: flex;

        .botton-left {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #91939a;

            .infotmation {
                display: flex;
                flex-direction: row;
                align-items: center;


                .text {
                    margin-right: 2vw;
                }

                .down {
                    padding-left: 1vw;
                    margin-top: 1vw;
                }
            }

        }


    }


    .botton-right {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        .botton-box {
            margin-left: 2vw;
        }
        .botton-wechat {
            margin-left: 2vw;
            .erweima{
                display: none;
            }
            &:hover{
                .erweima{
                    display: block;
                    position: absolute;
                    transform: translate(-7vw,-20vw);
                   
                    
                }
            }
        }

        



    }
}








@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}